<template>
   <div class="map-container" ref="mapContainer" tabindex="0"></div>
 </template>
 
 <script>
export default {
  data() {
    return {
      markersData: []
    }
  },
  mounted() {
    const script = document.createElement('script')
    script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=808a3921320e7d6b0a3d01c9098af188'
    script.onload = () => {
      this.fetchData()
    }
    document.head.appendChild(script)
  },
  methods: {
    fetchData() {
      uni.request({
        url: 'http://43.136.172.73/api/v1/coordinate/load',
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded',
          'Authorization': 'sfsdf'
        },
        success: (res) => {
          console.log('Response:', res.data)
          if (res.data.code === 200) {
            this.markersData = res.data.data
            this.initMap()
          } else {
            console.error('Failed to fetch data:', res.data.message)
          }
        },
        fail: (err) => {
          console.error('Error:', err)
        }
      })
    },
    initMap() {
      const map = new AMap.Map(this.$refs.mapContainer, {
        center: [102.85, 24.72],
        zoom: 11
      })

      this.markersData.forEach(item => {
        const marker = new AMap.Marker({
          position: [item.longitude, item.latitude],
          map: map
        })
      })
 
       // const marker1 = new AMap.Marker({
       //   position: [102.75, 25.02],
       //   map: map
       // })
 	
 
     }
   }
 }
 </script>
 
 <style>
 .map-container {
   width: 100%;
   height: 800px;
   overflow: hidden;
 }
 </style>
 
 